<template>
	<view class="page flex-col">
		<cu-custom bgColor="bg-gradual-red" id="cu-custom" :isBack="true">
			<block slot="content">保证金详情</block>
		</cu-custom>
		<view class="img_wapBox">
			<image class="image" :src="$getFileAccessHttpUrl(auctionData.icon)" @error="imgerror($event)" mode="aspectFill">
			</image>
		</view>
		<view class="detailcontent">
			<view class="title">
				{{auctionData.auctionName}}
			</view>
			<view class="h6">{{auctionData.auctionItemName}}</view>
			<view class="text">
				竞拍号码：{{auctionData.biddingNo}}
			</view>
			<view class="text">
				保证金的金额：{{auctionData.money}}
			</view>
			<view class="text">
				订单编号：{{auctionData.orderNo}}
			</view>
			<view class="text" v-if="auctionData.status == 0">
				审核状态：<view class="labelorgan">待审核</view>
			</view>
			<view class="text" v-if="auctionData.status == 1">
				审核状态：<view class="labelgereen">审核通过</view>
			</view>
			<view class="text" v-if="auctionData.status == 2">
				审核状态：<view class="labelred">审核不通过</view>
			</view>
			<view class="text" v-if="auctionData.status == 2" style="color: red;">
				审核不通过原因：{{auctionData.reason}}
			</view>
		</view>

	</view>
</template>

<script>
	import server from '@/api/server.js'
	export default {
		data() {
			return {
				auctionData: {},
			};
		},
		onLoad() {
			this.apiwarrantydetail() //头部信息
		},
		onShow() {

		},
		mounted() {


		},
		methods: {
			imgerror: function(e) {
				console.log('e',e)
				// if (_this.attachList.length > 0) {
				// }
				this.$set(this.auctionData,'icon','/static/home/128/loadfail.png')
					// this.auctionData.icon = "/static/home/128/loadfail.png"
			},
			//详情内容
			apiwarrantydetail() {
				server.warrantydetail({
					warrantyId: this.$root.$mp.query.warrantyId
				}).then(res => {
					console.log(res)
					if (res.data.success) {
						this.auctionData = res.data.result //拍卖会信息	
					} else {
						this.$tip.error(res.data.message)
					}

				})

			},

		},
	}
</script>

<style lang="scss" scoped>
	.img_wapBox {
		overflow: hidden;
		height: 80px;
		padding-bottom: 56.25%;
		position: relative;
		width: 100%;
		overflow: hidden;
		float: left;

		.image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			object-fit: cover;
			-webkit-transition: all 0.5s;
			-o-transition: all 0.5s;
			transition: all 0.5s;
		}
	}

	.detailcontent {
		background-color: white;
		padding: 0 10px 10px 20px;
		width: 100%;
		float: left;

		.h6 {
			font-size: 16px;
			line-height: 28px;
		}

		.textlabel {
			width: 100%;
			float: left;
			margin-bottom: 5px;

			.right {
				float: right;
			}

			.box {
				border: 1px solid #B81D22;
				float: left;
				font-size: 10px;
				border-radius: 4px;
				padding: 2px 4px;
				color: #B81D22;
			}

			.box:nth-child(1) {
				margin-right: 5px;
			}
		}

		.title {
			font-size: 18px;
			font-weight: bold;
			margin: 10px 0;
			line-height: 28px;
		}

		.text {
			font-size: 14px;
			line-height: 28px;
			color: #666666;
			float: left;
			width: 100%;

			view {
				display: inline-block;
			}

			.lable {
				font-size: 16px;
				display: flex;

				.image {
					width: 25px;
					padding: 0;
					margin: 0;
					height: 25px;
					vertical-align: middle;
				}
			}
		}

		.content {
			text-indent: 2em;
			line-height: 22px;
			font-size: 14px;
			letter-spacing: 1px;
			margin-top: 10px;
			float: left;
			width: 100%;

			p {
				line-height: 22px;
				font-size: 14px;
				letter-spacing: 2px;
			}
		}

	}
</style>
